<template>
  <div>
    <div class="content" key="0" v-if="page==0">
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">端上了我的饭盆，觉醒吧干饭之魂</p>
          <span>干饭人之歌</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail"  class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">我真的好想 3 2 1 敲，终于等到了饭点</p>
          <span>干饭人之歌</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail"  class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">干饭人干饭时间</p>
          <span>干饭时间</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail"  class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">第一个冲向饭店</p>
          <span>干饭魂</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">终于等到了饭点，干饭人干饭时间终于等到了饭点，干饭人干饭时间终于等到了饭点</p>
          <span>干饭人</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">骑上我心爱的小摩托</p>
          <span>小摩托</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">他永远不会堵车</p>
          <span>小摩托</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
    </div>

    <div class="content" key="1" v-if="page==1">
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">这是科研页</p>
          <span>干饭人之歌</span>
          <i>浏览量 22</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail"  class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">端上了我的饭盆，觉醒吧干饭之魂</p>
          <span>干饭人之歌</span>
          <i>浏览量 22</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail"  class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">我真的好想 3 2 1 敲，终于等到了饭点</p>
          <span>干饭人之歌</span>
          <i>浏览量 22</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail"  class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">干饭人干饭时间</p>
          <span>干饭时间</span>
          <i>浏览量 22</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail"  class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">第一个冲向饭店</p>
          <span>干饭魂</span>
          <i>浏览量 22</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">终于等到了饭点，干饭人干饭时间终于等到了饭点，干饭人干饭时间终于等到了饭点</p>
          <span>干饭人</span>
          <i>浏览量 22</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">骑上我心爱的小摩托</p>
          <span>小摩托</span>
          <i>浏览量 22</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">他永远不会堵车</p>
          <span>小摩托</span>
          <i>浏览量 22</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
    </div>

    <div class="content" key="2" v-if="page==2">
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">这里是作品页</p>
          <span>干饭人之歌</span>
          <i>浏览量 333</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>

      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">端上了我的饭盆，觉醒吧干饭之魂</p>
          <span>干饭人之歌</span>
          <i>浏览量 121</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">我真的好想 3 2 1 敲，终于等到了饭点</p>
          <span>干饭人之歌</span>
          <i>浏览量 333</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">干饭人干饭时间</p>
          <span>干饭时间</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">第一个冲向饭店</p>
          <span>干饭魂</span>
          <i>浏览量 333</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">终于等到了饭点，干饭人干饭时间终于等到了饭点，干饭人干饭时间终于等到了饭点</p>
          <span>干饭人</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">骑上我心爱的小摩托</p>
          <span>小摩托</span>
          <i>浏览量 333</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
      <router-link tag="div" to="/detail" class="content-item border">
        <div class="item-desc">
          <p class="item-desc-title">他永远不会堵车</p>
          <span>小摩托</span>
          <i>浏览量 112</i>
        </div>
        <div class="item-img-wrapper">
          <div class="item-img-box">
            <img src="/static/search/123.jpg" alt="">
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchContent',
  props: {
    page: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/stylus/mixin.styl'
@import '~styles/stylus/varibles.styl'
.content
  padding .1rem 0.3rem 1rem
  .content-item
    width 100%
    height 0
    padding-bottom 30%
    margin-bottom .15rem
    display inline-block
    font-size 0
    &:before
      border-radius .2rem
    // shadow()
    .item-desc
      width 70%
      height 100%
      display inline-block
      vertical-align top
      font-size .25rem
      box-sizing border-border-box
      position relative
      .item-desc-title
        line-height .4rem
        font-size .32rem
        padding-top .36rem
        padding-left .25rem
        box-sizing border-box
        ellipsis2()
      &>span
        color $fontColor
        padding-top .5rem
        padding-left .25rem
        box-sizing border-box
        position absolute
        bottom -1.7rem
      &>i
        color $fontColor
        padding-left .25rem
        position absolute
        bottom -1.7rem
        left 3rem
    .item-img-wrapper
      width 30%
      height 0
      padding-bottom 30%
      overflow hidden
      display inline-block
      .item-img-box
        width 100%
        box-sizing border-box
        padding .2rem
        &>img
          display inline-block
          width 100%
</style>
